<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小案例</title>
    <style>
      /*默认样式*/
      * {
        font-family: Arial;
        font-size: 14px;
        margin: 0;
        padding: 0;
        border: none;
      }
      a { text-decoration: none; }
      ul { list-style: none; }
      html,body {
        width: 100%;
        height: 100%;
      }
      body {
        background-image: url("../images/bg.jpg");
      }
      .page-header {
        height: 70px;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .header-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;

      }
      .header-nav li a {
        color: white;
        font-size: 20px;
        border: white 1px solid;
        border-radius: 8px;
        padding: 10px;
        margin-right: 20px;
      }
      .header-nav li:last-child {
        margin-right: 0;
      }
      .page-content {
        height: calc(100vh - 70px);
        display: flex;
      }
      .content-nav {
        margin: auto;
        width: 1000px;
        height: 300px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
      .item {
        width: 180px;
        height: 200px;
        background-color: orange;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.2s linear;
        cursor: pointer;
      }
      .item:hover {
        box-shadow: 0 0 20px black;
      }
      .item span {
        font-size: 20px;
      }
      .item:nth-child(1) {
        background-color: #595CA8;
      }
      .item:nth-child(2) {
        background-color:  #FF9D2E;
      }
      .item:nth-child(3) {
        background-color:  #01A6DE;
      }
      .item:nth-child(4) {
        background-color: #015E91;;
      }
      .item:nth-child(5) {
        background-color:  #1DC128;
      }
    </style>
</head>
<body>
  <header class="page-header">
      <a>
        <img src="../images/logo.png" alt="logo">
      </a>
      <ul class="header-nav">
        <li><a href="#">国内校区</a></li>
        <li><a href="#">缅甸校区</a></li>
        <li><a href="#">非洲校区</a></li>
        <li><a href="#">美国校区</a></li>
      </ul>
  </header>
  <div class="page-content">
    <div class="content-nav">
      <div class="item">
        <img src="../images/item1.png" alt="">
        <span>邮箱联系</span>
      </div>
      <div class="item">
        <img src="../images/item2.png" alt="">
        <span>关于我们</span>
      </div>
      <div class="item">
        <img src="../images/item3.png" alt="">
        <span>电话联系</span>
      </div>
      <div class="item">
        <img src="../images/item4.png" alt="">
        <span>微信联系</span>
      </div>
      <div class="item">
        <img src="../images/item5.png" alt="">
        <span>联系客服</span>
      </div>

    </div>
  </div>
</body>
</html>